<template>
  <s-layout title="用户信息">
    <uni-forms label-position="left" border :label-width="90">
      <view class="bg-white ss-p-y-50 ss-flex-col align-center">
        <view class="uploat-icon">
          <uni-icons type="camera" color="#fff" size="40" />
        </view>
      </view>
      <!-- 基本资料 -->
      <view class="detail">
        <view class="title">基本资料</view>
        <view class="ss-p-x-30">
          <uni-forms-item label="姓名:">
            <uni-easyinput :styles="state.style" :input-border="false" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="账号:">
            <uni-easyinput :styles="state.style" :input-border="false" :disabled="true" />
          </uni-forms-item>
          <uni-forms-item label="性别:">
            <view class="flex-bar align-center" style="height: 100%">
              <view>男</view>
              <uni-icons type="right" color="#999" size="22" />
            </view>
          </uni-forms-item>
        </view>
      </view>
      <!-- 个人简介 -->
      <view class="detail">
        <view class="title">个人简介</view>
        <view class="ss-p-x-30">
          <uni-easyinput type="textarea" :input-border="false" placeholder="用一段话介绍自己～" />
        </view>
      </view>
    </uni-forms>
  </s-layout>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue'
import sheep from '@/sheep'
import { clone, isEmpty } from 'lodash-es'

const state = reactive({
  genderType: [
    { value: '', text: '男' },
    { value: '', text: '女' }
  ],
  style: {
    disableColor: '#fff'
  },
  model: {},
  rules: {},
  thirdOauthInfo: null
})

onBeforeMount(async() => {})
</script>

<style lang="scss" scoped>
.uploat-icon {
	width: 160rpx;
	height: 160rpx;
	line-height: 160rpx;
	text-align: center;
	border-radius: 50%;
	background-color: #999;
}

.detail {
	margin-top: 14rpx;
	background-color: #fff;

	.title {
		padding: 30rpx;
		color: #4e76ec;
		font-size: 36rpx;
		font-weight: bold;
	}
	.list-border {
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 2rpx solid #e7e7e7;
	}
}
</style>
